<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom操作</title>
</head>

<body>
    <div id="d1" style="background-color: antiquewhite;">
        这是个div
    </div>

    <div id="d2" class="d3" style="background-color: aquamarine;">
        这是个div2
        <ul>
            <li>List 1</li>
            <li>List 2</li>
        </ul>
    </div>
    <div id="d1" class="d3" style="background-color: aqua;">
        这是个div3
        <ul>
            <li>List 3</li>
            <li>List 4</li>
        </ul>
    </div>
    <!-- Dom操作 -->
    <script>
        // 元素获取方法

        //1.‌ID获取(该方法会返回第一个匹配ID的元素（按DOM树从上到下的顺序），忽略后续重复ID的元素)
        console.log("ID获取结果：")
        let div1 = document.getElementById("d1")
        console.log(div1)

        console.log("\n")
        
        //2.标签名/类名获取
        console.log("标签名获取结果：")
        let div2 = document.getElementsByTagName("li") //标签名
        console.log(div2)
        for(i of div2){
            console.log(i)
        }
        div2[0].style.color="red" //修改样式

        console.log("\n")

        console.log("类名获取结果：")
        let div3 = document.getElementsByClassName("d3") //Class类名
        console.log(div3)

        console.log("\n")

        //3.CSS选择器获取(querySelector()返回首个匹配元素，querySelectorAll()返回静态NodeList，支持复杂选择器且可直接遍历)
        console.log("CSS选择器获取结果：")
        let di = document.querySelector("#d1")
        console.log(di)

        let di2 = document.querySelectorAll("#d1")
        console.log(di2)
        
        console.log("\n")
        
        //修改内容
        div1.innerHTML= '<h1>这是个标题</h1>'//可解析HTML标签，存在XSS风险
        div1.innerText='<h1>这是个标题</h1>' 
        div1.textContent='安全文本' //仅处理纯文本，防XSS
        
        //创建元素
        const newDiv = document.createElement('div') // 创建 < div > 元素
        // 设置属性和内容
        newDiv.id = 'newDiv'
        newDiv.textContent = '这是新创建的div'
        newDiv.style.color = 'red'
        console.log(newDiv)
        
        // 添加元素
        document.body.appendChild(newDiv)

    </script>
</body>

</html>